.content{
	padding: 4px 20px;
}


.flex{
	display: flex;
}
.flex-row{
	display: flex;
	flex-direction: row;
}
.flex-row-reverse{
	display: flex;
	flex-direction: row-reverse;
}
.flex-column{
	display: flex;
	flex-direction: column;
	/* 元素居中效果  column 主轴是垂直方向*/
	/* 使用纵轴居中 */
	align-items:center;
}
.flex-column-reverse{
	/* 从下到上排版 */
	display: flex;
	flex-direction: column-reverse;
	align-items:center;
}
/* 换行显示 */
.flex-wrap{
	display:flex;
	flex-wrap:wrap;
}
.flex-wrap-reverse{
	display:flex;
	flex-wrap:wrap-reverse;
}
.flex-start{
	display:flex;
	justify-content:flex-start;
}
.flex-center{
	display:flex;
	justify-content:center;
	
}
.flex-end{
	display:flex;
	justify-content:flex-end;
	
}
.space-around{
	display:flex;
	justify-content:space-around;
	
}
.space-between{
	display:flex;
	justify-content:space-between;
}
.flex-item{
	width: 100upx;
	height: 100upx;
	background-color: pink;
	/* margin: 20upx; */
	line-height: 100upx;
	text-align: center;
	color: aqua;
	border: 2upx solid #f2f2f2;
}
.box{
	width: 670upx;
	margin:0 40upx;
	height:670upx;
	background:rebeccapurple;
}
.box .flex-item:nth-child(2){
	height: 200upx;
	line-height:200upx ;
}
.box .flex-item:nth-child(3){
	height: 400upx;
	line-height:400upx ;
}
.box .flex-item:nth-child(4){
	height: 300upx;
	line-height:300upx ;
}
.aif-start{
	display:flex;
	justify-content:space-between;
	align-items: flex-start;
}
.aif-center{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.aif-end{
	display:flex;
	justify-content:space-between;
	align-items: flex-end;
}
.aif-stretch{
	display:flex;
	justify-content:space-between;
	align-items: stretch;
}
.aif-stretch .flex-item{
	/* 清空其他样式设置的高度 */
	height: auto !important;
	line-height: inherit !important;
}
.aif-baseline{
	display: flex;
	justify-content:space-between;
	align-items: baseline;
}
.ac-start{
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}
[class^="box ac"] .flex-item{
	height: 100upx !important;
	line-height: 100upx !important;
	margin: auto 50upx;
}
.ac-center{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}
.ac-end{
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
}
.ac-around{
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
}
.ac-between{
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}
.grow{
	flex-grow: 1;
	height: 100upx;
	background: olivedrab;
	border: 2px solid #ffffff;
}
.rate .grow:nth-child(1){
	flex-grow: 1;
}
.rate .grow:nth-child(2){
	flex-grow: 3;
}
.rate .grow:nth-child(3){
	flex-grow: 2;
}

